<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="../JS/vue.js"></script>
<style>
    th, td {
        text-align: center;
    }
</style>
</head>
<body>
    <div id="app">
        <table border="1px">
            <thead>
                <tr style="width: 500px;">
                    <th style="width: 7%;"></th>
                    <th style="width: 30%;">书籍名称</th>
                    <th style="width: 20%;">出版日期</th>
                    <th style="width: 15%;">价格</th>
                    <th style="width: 20%;">购买数量</th>
                    <th>操作</th>
                </tr>
            </thead>
            <tbody>
                <tr v-for="(item,index) in books" :key="item">
                    <td>{{index}}</td>
                    <td>《{{item.name}}》</td>
                    <td>{{item.date}}</td>
                    <td>￥{{item.price.toFixed(2)}}</td>
                    <td>
                        <button @click="item.number--">-</button>
                        {{item.number}}
                        <button @click="item.number++">+</button>
                    </td>
                    <td><button @click="removeBook(index)">移除</button></td>
                </tr>
            </tbody>
        </table>
        <p>总价为：{{sum.toFixed(2)}}</p>
    </div>
    <script>

        function Book(name,date,price,number) {
            this.name = name
            this.date = date
            this.price = price
            this.number = number
        }

        const app = new Vue({
            el: '#app',
            data:{
                books: [new Book("算法导论","2006-9",85.00,1),
                new Book("UNIX编程艺术","2006-9",90.00,1),
                new Book("代码大全","2006-9",70.00,1)]
            },
            methods:{
                removeBook(index){
                    this.books.splice(index,1)
                }
            },
            computed:{
                sum:function(){
                    let res = 0
                    for(let book of this.books){
                        res += book.price
                    }
                    return res
                }
            }
        })
    </script>
</body>
</html>